import React from 'react'
import { NavBar, Icon,PickerView } from "antd-mobile";
import SearchInput from '../../components/Searchinput'
import css from './index.module.scss'
import {request} from '../../utils/request'
// 引入封装的单个房源展示组件
import HouseItem from '../../components/HouseItem/index';
// 导入虚拟列表(长列表)插件
import { List } from "react-virtualized";
class Found extends React.Component {
  //城市id,定义全局使用
  cityId='';
  selectParams={};

  // 是否正在加载数据的标记
  isLoading = false;

  // 准备用于分页的参数，
  pageSize = 20;
  pageParams = {
    // 开始项
    start: 1,
    // 结束项
    end: this.pageSize,
  };

    //cols代表前3个过滤组件中分别有几列
    state = { 
        filter_title_array:[
            {id:1,text:'区域',cols:3},
            {id:2,text:'方式',cols:1},
            {id:3,text:'租金',cols:1},
            {id:4,text:'筛选'},
        ],
        //  activeIndex为0 1 2时显示前3个相同的选项内容，
        // 为3时展示第4个选项内容，为-1时不展示任何内容
        activeIndex:-1,
        //过滤条件数据的集合
        filter_data:[],
        //用户选中的四个过滤条件中的数据
        select_data:[[],[],[],[]],
         // 房源数组
        house_array: []
     };

     //获取PickerView组件的值
     pickerViewonChange=(value)=>{
       const {select_data,activeIndex}=this.state
      // console.log(value);
      select_data[activeIndex]=value
      console.log(select_data);
      this.setState({select_data})  
     }

     //第四个过滤组件的条件
     //点击选中把value添加到数组中,再次点击就从数据中删除
     getSelectMore=(value)=>{
       const {select_data,activeIndex}=this.state
       //没有就返回-1把value添加到数组里，存在返回索引,走删除操作
       const index=select_data[activeIndex].findIndex(item=>item===value);
       if(index===-1){
         select_data[activeIndex].push(value)
       }else{
        select_data[activeIndex].splice(index,1)
       }
       this.setState({select_data})
     }

     //底部按钮点击确定获取PickerView组件的数据并处理数据格式
     getSelectParams=()=>{
       //结构选中的数组格式数据不能直接用于请求
       const {select_data}=this.state;
       //创建一个新的变量用于处理后台请求所需要的数据格式
       let selectParams={}
       //第一个过滤组件有3个选项:如果3个选项都选择了数据,第一项
      //  是键名称key,第三项是value,如果第三项选择'不限'这个选项-'null',那么第二项才是value值
      const key1=select_data[0][0];
      const value1=['null'].includes(select_data[0][2])?select_data[0][1]:select_data[0][2];
      selectParams={
        [key1]:value1,
        //键名称参照接口文档
        rentType:select_data[1][0],
        price:select_data[2][0],
        more:select_data[3].join(',')
      };

      //遍历对象,删除无效的数据
      Object.keys(selectParams).forEach(key=>{
        if([undefined,'null',''].includes(selectParams[key])){
          delete selectParams[key]
        }
      })

      // console.log('select_data',select_data);
      // console.log('selectParams',selectParams);

      //点击确定和取消按钮或者点击外层隐藏组件的弹出层
      this.hideLayout();
      // 发送请求
    // 把当前的选中的参数，作为当前组件公用数据，用于别处发送请求使用
    this.selectParams=selectParams

    // 获取房源数据
    this.gethouseList();

    console.log('selectParams',selectParams);
     }

     // 获取房源数据
  gethouseList = async () => {
    // 请求前，把 loading 标记变成真
    this.isLoading = true;
    // 发送请求获取房源数据
    const res = (await request.get('/houses', {
      params: {
        cityId: this.cityId,
        ...this.selectParams,
        ...this.pageParams
      }
    })).data.body;
    // 请求完成后，把 loading 标记变成假
    this.isLoading = false;
    // 把请求得到的数据，连接到原数组中
    this.setState({ house_array: [...this.state.house_array, ...res.list] });
  };

  // 虚拟长列表渲染行的函数
  rowRenderer = ({ index, key, style }) => {
    // 这里的返回的代码已经会重复渲染了，这里就类似于之前写的 house_array.map 返回的 JSX，第一次渲染无需自己再写 map 了
    return <div key={key} style={style}>
      <HouseItem item={this.state.house_array[index]} />
    </div>;
  };

  // 长列表的滚动事件
  //    scrollHeight    长列表内容总高
  //    clientHeight    可视区高
  //    scrollTop       滚动出去了多少

  // 还没开始滚动的时候，onScroll 自己触发了一次
  onScroll = ({ scrollHeight, clientHeight, scrollTop }) => {
    // 第一次渲染 List 组件的时候，数据还没请求回来，所以列表高度为 0
    // 这行代码思考下是否有问题，如何写更好 ???
    const isFirstRender = scrollHeight === 0;
    // 是否准备触底，大的的高度 - 两个小高度 <= 某个数
    const isReachBottom = scrollHeight - clientHeight - scrollTop <= 60;

    // 有几种情况是不需要继续往后执行加载分页数据代码的：
    //    1. List 组件首次渲染
    //    2. 还没触底的情况
    //    3. 如果数据还在加载的时候
    //    4. 还有那种情况？
    if (isFirstRender || !isReachBottom || this.isLoading) return;

    console.log('滚动准备触底了，开始加载下一页数据');
    // 自己处理分页的开始项和结束项
    this.pageParams.start += this.pageSize;
    this.pageParams.end += this.pageSize;
    // 重新请求房源列表数据
    this.gethouseList();
  };

     //隐藏弹出层
     hideLayout=()=>{
       this.setState({activeIndex:-1})
     }

     componentDidMount(){
         //获取当前城市下的房源筛选数据
         this.getFilterData();
     }

     //点击清除按钮第四个过滤组件筛选的条件清空
     clearMoreData=()=>{
       const {select_data,activeIndex}=this.state
       //这里有很多方法清除,可以把数组变为空数组或者数组长度为0以及下面这种方法
       select_data[activeIndex].splice(0)
       this.setState({select_data})
       
     }
     
     getFilterData=async ()=>{
         //过滤条件数据的存储
         let filter_data=[];
         //先获取当前城市的id标识,根据id标识在获取筛选数据
          this.cityId = (await request.get('/area/info?name=广州')).data.body.value;
         const res = (await request.get('/houses/condition?id=' + this.cityId)).data.body;
         //获取第一个过滤条件里的区域和地铁
         filter_data[0]=[res.area,res.subway]
           //获取第二个过滤条件里的整租和合租
           filter_data[1]=res.rentType;
            //获取第三个过滤条件里的价格
            filter_data[2]=res.price;
            //获取第四个过滤条件里的数据
            filter_data[3]=[
                { title: '户型', data: res.roomType },
                { title: '朝向', data: res.oriented },
                { title: '楼层', data: res.floor },
                { title: '房屋亮点', data: res.characteristic },
            ]
            //更新数据状态
            this.setState({filter_data})
            // 主动获取一次房源数据
            this.gethouseList();
            
     }
     //实现3个内容的展示
    //  1.展示前3个相同的选项内容
    //  2.展示第4个选项内容
    //  3.不展示任何内容
    renderFilterContent(){
        const{filter_title_array,activeIndex,filter_data,select_data}=this.state
        //根据当前的索引值,找到filter_title_array中对应模块的id
        const titleId=filter_title_array[activeIndex]?filter_title_array[activeIndex].id:-1;
        //根据id来判断哪个模块
        if (titleId >= 1 && titleId <= 3) {
            return <>
              {/* 内容 123 是绝对定位 */}
              <div className={css.filter_content_absolute}>
                {/* 主体内容 */}
                <div className={css.filter_content_body}>
                  {/* 内容 */}
                   {/* PickerView 组件 */}
            <PickerView
              data={filter_data[activeIndex]}
              cols={filter_title_array[activeIndex].cols}
              value={select_data[activeIndex]}
              onChange={this.pickerViewonChange}
            />
                      </div>
                {/* 底部按钮 */}
                <div className={css.filter_content_footer}>
                  <span onClick={this.hideLayout} className={css.filter_content_footer_btn}>取消</span>
                  <span onClick={this.getSelectParams} className={css.filter_content_footer_btn}>确定</span>
                </div>
                {/* 遮罩层1 */}
                <div onClick={this.hideLayout} className={css.mask}></div>
              </div>
            </>;
          }
          // 如果 id 等于 4，就显示右侧定位盒子
          else if (titleId === 4) {
            return <>
              {/* 内容4 是 固定定位的盒子 */}
              <div className={css.filter_content4_fixed}>
                {/* 主体内容 */}
                <div className={css.filter_content4_body}>
                  {/* 内容 */}
                  {
                      filter_data[3].map(item=>(
                          <div key={item.title}>
                           {/* 标题 */}
                      <div className={css.title}>{item.title}</div>
                        {/* 标题下的数据展示 */}
                       <div className={css.list}>
                           {
                               item.data.map(item2=>(
                               <div key={item2.value}
                              className={
                                [
                                css.item,
                                select_data[activeIndex].includes(item2.value) ? css.active : ''
                               ].join(' ')
                              } 
                              onClick={()=>this.getSelectMore(item2.value)}>{item2.label}</div>
                               ))
                           }
                       </div>
                       </div>
                      ))
                  }
                    </div>
                {/* 底部按钮 */}
                <div className={css.filter_content_footer}>
                  <span onClick={this.clearMoreData} className={css.filter_content_footer_btn}>清除</span>
                  <span onClick={this.getSelectParams} className={css.filter_content_footer_btn} onClick={this.getSelectParams}>确定</span>
                </div>
                <div onClick={this.hideLayout} className={css.mask}></div>
              </div>
            </>;
          }
          // 其他情况下，返回空标签，相当于不展示内容 
          else {
            return <></>;
          }
    }
    changeIndex=(activeIndex)=>{
        if(activeIndex===this.state.activeIndex) return;
        this.setState({activeIndex})
    }
    render() { 
        const {filter_title_array,activeIndex, house_array}=this.state;
        return (
            <div className={css.found}>
                <NavBar
      mode="light"
      icon={<Icon type="left" />}
      onLeftClick={() => this.props.history.go(-1)}
    >
        <SearchInput></SearchInput>
    </NavBar>
    {/* 过滤模块 */}
    <div className={css.filter}>
        <div className={css.filter_title}>
            {
                filter_title_array.map((item,index)=>(
                    <div onClick={()=>this.changeIndex(index)} key={item.id} className={
                        [
                            css.filter_title_item,
                            index===activeIndex ? css.active:''
                        ].join(' ')
                    }>
                        <span>{item.text}</span>
                        <i className='iconfont icon-arrow'/>
                        </div>
                ))
            }
        </div>
        <div className={css.filter_content}>
            {/* 调用函数,返回内部所需要的jsx结构 */}
            {this.renderFilterContent()}
        </div>
    </div>
    <div className={css.house_list}>
          {/* 虚拟长列表组件调用：5个必要参数 */}
          <List
            width={window.screen.width}
            height={window.screen.height - 45 - 40 - 50}
            rowCount={house_array.length}
            rowHeight={108}
            rowRenderer={this.rowRenderer}
            // 滚动事件
            onScroll={this.onScroll}
          />
        </div>
            </div>
        );
    }
}
 
export default Found;